// React 核心包
import React from 'react'
// 渲染 React 代码到页面上
import { createRoot } from 'react-dom/client'

// 能产生结果（有返回值）的式子，一般有变量或运算符组成
// 1 + 1
// const arr = []
// console.log(arr)
// arr.map(item => item + 1)
// function fn() { return 8 }    fn()
// 5 > 8 ? 'ok' : 'no'

// 语句
/* const a = for (let i = 0; i < 8; i++) {}
console.log(a) */
// console.log(while(true) {})
// if () {} else {}

// React.createElement

const name = 'ifer'

const obj = { address: '河南' }

const arr = ['a', 'b']

const fn = () => {
  return 'Hello React'
}

const test = <span>test</span>

const wrap = (
  <React.Fragment>
    <p>name: {name}</p>
    <p>address: {obj.address}</p>
    {/* obj 确实也是表达式，但是比较特殊，不是直接在 {} 中使用 */}
    {/* <p>{obj}</p> */}
    <p>数组中某一项：{arr[0]}</p>
    <p>整个数组：{arr}</p>
    <p>函数调用：{fn()}</p>
    <p>JSX 本身也是表达式：{test}</p>
  </React.Fragment>
)
// createRoot(渲染到哪儿).render(渲染谁)
createRoot(document.querySelector('#root')).render(wrap)
